<template>
	<div class="uiwu">
		<uw-canvas-background />
		<view class="uiwu-form uw-bg-white uw-flex uw-radius-4">
			<div class="uw-flex-center uw-bg-danger uw-p0-40">
				<el-image :src="logImage" style="width: 300px;height: 300px;"></el-image>
			</div>
			<div class="uw-p20" style="width: 600px;">
				<div class="uw-flex-center uw-size-40 uw-weight-600 uw-p50-0 logo-title">Uiwu Admin</div>
				<div class="uw-p0-80">
					<div class="uw-m10-0">账号：</div>
					<el-input style="height: 40px;" placeholder="请输入账号" v-model="account"></el-input>
				</div>
				<div class="uw-p0-80">
					<div class="uw-m10-0">密码：</div>
					<el-input style="height: 40px;" type="password" placeholder="请输入密码" v-model="password"></el-input>
				</div>
				<div class="uw-p0-80 uw-flex-center-y">
					<el-checkbox size="large"></el-checkbox>
					<text class="uw-size-12 uw-ml-4" style="line-height: 1;">记住密码</text>
				</div>
				<div class="uw-flex-center uw-p50-80">
					<div class="login-button uw-radius-4 uw-size-20 uw-bg-danger uw-flex-center uw-color-white" @click="tapLogin">登录</div>
				</div>
			</div>
		</view>
	</div>
</template>

<script setup lang="ts">
	import { login } from '@/api/api';
	import uwCanvasBackground from './components/uwCanvasBackground.vue';
	import { ElMessage } from 'element-plus';
	import { ref } from 'vue';
	import logImage from '@/assets/uiwu.png';
	import { useRouter } from 'vue-router';
	const router = useRouter()
	const account = ref('admin')
	const password = ref('123456')
	/**
	 * tapLogin 授权登录
	 */
	const tapLogin = async () => {
		const data:any = await login({
			username: account.value,
			password: password.value
		})
		ElMessage.success(data.message)
		localStorage.setItem('token', data.data)
		router.push('/')
	}
</script>

<style scoped>
	.uiwu {
		/* background-color: #000; */
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.uiwu-form{
		position: relative;
		z-index: 9;
		overflow: hidden;
	}
	.login-button{
		width:100%;
		height: 50px;
		cursor: pointer;
	}
	.logo-title{
		text-shadow: 20px 5px #f2f2f2;
	}
</style>